<template>
     <div class="hello">
       <van-nav-bar
  title="设备安装订单"
  >
  <van-icon name="user-circle-o" @click="aboutPage" slot="right" size="30" color="#777777" />

</van-nav-bar>
  <van-search
    v-model="value"
    show-action
    placeholder="请输入设备ID、设备类型、车牌号、车架号"
    @search="onSearch"
    @cancel="onCancel"
  />
 <van-tabs v-model="active" color="#333333" >
  <van-tab title="未提交">
<div  v-for="(item,index) in datas1" :key="index" class="m10 list" @click="changePage(item,1)">
  <p> <span class="custom-title">IMEI:</span>{{item.deviceNo}}  </p>

    <p> <span class="custom-title">设备类型:</span>{{item.deviceType}}</p>
</div>
</van-tab>
  <van-tab title="审核中">
<div  v-for="(item,index) in datas2" :key="index" class="m10 list"  @click="changePage(item,2)">
  <p> <span class="custom-title">IMEI:</span>{{item.deviceNo}}
<span class="right">{{item.modifyTime}} </span></p>

    <p> <span class="custom-title">设备类型:</span>{{item.deviceType}}</p>
      <p> <span class="custom-title">车牌号:</span>{{item.vehicleNo}}</p>
</div>
  </van-tab>
  <van-tab title="未通过"><div  v-for="(item,index) in datas3" :key="index" class="m10 list" @click="changePage(item,3)" > 
  <p> <span class="custom-title">IMEI:</span>{{item.deviceNo}}<span class="right">{{item.modifyTime}} </span></p>
    <p> <span class="custom-title">设备类型:</span>{{item.deviceType}}</p>
      <p> <span class="custom-title">车牌号:</span>{{item.vehicleNo}}</p>
</div></van-tab>
  <van-tab title="已通过"><div  v-for="(item,index) in datas4" :key="index" class="m10 list">
  <p> <span class="custom-title">IMEI:</span>{{item.deviceNo}}<span class="right">{{item.modifyTime}} </span></p>
    <p> <span class="custom-title">设备类型:</span>{{item.deviceType}}</p>
      <p> <span class="custom-title">车牌号:</span>{{item.vehicleNo}}</p>
</div></van-tab>
</van-tabs>

  </div>
</template>
<script>
export default {
    data(){
        return{
          active: 0,
           value: '',
           datas1:[],
            datas2:[],
             datas3:[],
              datas4:[]
        }
    },
    mounted(){
      this.getLists(1,'');
      this.getLists(2,'');
      this.getLists(3,'');
      this.getLists(4,'');
    },
    methods:{
      onSearch(val) {
        console.log(this.active+1,val)
      this.getLists(this.active+1,val)
    },
    //未提交列表请求数据
    getLists(num,value){
        const parm = {
            status:num,
            searchKey:value
          }
          this.$api.getInfos(parm).then(res => {
            if(res.code===0){
              if(num===1)
               { this.datas1 = res.data.rows} 
               else if(num ===2) {
                  this.datas2 = res.data.rows
               }
                else if(num ===3) {
                  this.datas3 = res.data.rows
               } else if(num ===4) {
                  this.datas4 = res.data.rows
               }
            } else {
               this.$toast(res.msg)
            }
       
          }).catch(error => {
             this.$toast(error)
          })
    },
    search(){
      
    },
    onCancel() {
      this.value =''
    },
      aboutPage(){
            this.$router.push({name:'About'})
      },
        changePage(item,num){
           sessionStorage.setItem("item", item.id);
           this.$router.push({name:'Add',params:{item:item,num:num}})
        }
    }
}
</script>
<style scoped>
.list{padding:1px 15px; background: #fff;color: #666666; font-size: 14px; line-height: 10px;}
.m10{
  margin:0px; border-bottom: 1px solid #eee;
}

.right{float:right;font-size: 12px;color: #666666;;}
</style>